<template>
  <div>
    <h2>深入v-model</h2>
    <input type="text" v-model="info" />
    <span>{{ info }}</span>
    <br />
    <h2>v-model实现底层原理</h2>
    <input type="text" :value="info1" @input="handler" />
    <span>{{ info1 }}</span>
    <h2>v-model实现父子组件数据同步</h2>
    <!-- :value 是props  @input:自定义事件 -->
    <CustomInput :value="info" @input="handler1"></CustomInput>
    <!-- 底下的这行代码原理与上面写法是一样的！！！ -->
    <CustomInput v-model="info"></CustomInput>
  </div>
</template>

<script type="text/ecmascript-6">
import CustomInput from "./CustomInput.vue";
export default {
  name: "ModelTest",
  data() {
    return {
      info: "我爱你豪哥，臭不要脸",
      info1: "张杰666",
    };
  },
  components: {
    CustomInput,
  },
  methods: {
    //v-model底层实现原理
    handler(event) {
      //用户的行为修改info1的数据
      this.info1 = event.target.value;
    },
    handler1(params){
      this.info = params;
    }
  },
};
</script>
